<template>
  <div>
    <el-row>
      <el-button size="mini" type="primary">新建</el-button>
      <el-button size="mini">复制</el-button>
      <el-button size="mini">删除</el-button>
      <el-button size="mini">全部删除</el-button>
      <el-button size="mini">导入数据</el-button>
    </el-row>
    <el-table
      ref="singleTable"
      :data="tableData"
      border
      highlight-current-row
      class="tableData">
      <el-table-column
        property="date"
        label="日期"
        width="120">
      </el-table-column>
      <el-table-column
        property="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        property="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import FormTransfer from "@/components/form/transfer";
  // 模拟获取的数据
	export default {
    components: { FormTransfer },
    model: {
      prop: 'parentArr',
      event: 'change-parentArr'
    },
    props: {
      parentArr: {
        type: Array,
        default() {
          return []
        }
      },
      // 传入选中的item,主要时防止list里面没有选中的数据
      parentSelectItem: {
        type: Array,
        default() {
          return []
        }
      },
      width: {
        type: Number,
        default: 180
      },
      height: {
        type: Number,
        default: 30
      },
      placeholder: {
        type: String,
        default: '请输入'
      },
      multiple: {
        type: Boolean,
        default: false
      },
      isUserIcon: {
        type: Boolean,
        default: false
      }, //是否需要详细弹框
      dataList: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        tableData: []
      }
    },
    watch: {
      seachValue: {
        handler(value) {
          console.log(2222)
          this.getList(value)
        },
        deep: true,
        immediate: true
      },
      parentArr: {
        handler(value) {
          this.currentval = value
        },
        deep: true,
        immediate: true
      },
      parentSelectItem: {
        handler(value) {
          this.selectItem =  value
        },
        deep: true,
        immediate: true
      },
      currentval: {
        handler(value) {
          this.$emit('change-parentArr', value)
        }
      },
      dataList: {
        handler(value) {
          console.log(value)
          this.seachClickList =  value
        },
        deep: true,
        immediate: true
      }
    },
    created() {},
    methods: {
      getList(value) {
        if (this.dataList.length > 0) this.seachClickList =  this.dataList
        if (value) {
          this.list = this.seachClickList.filter(item => item.label.indexOf(value) > -1)
        } else {
          this.list = this.seachClickList
        }
        this.getSelectItem()
      },
      // 获取选中的item
      getSelectItem() {
        const noItemList = this.currentval.map(n => {
          if (this.selectItem.findIndex(i => i.id == n) == -1) {
            return n
          }
          return null
        }).filter(n => n != null)
        noItemList.forEach(item => {
          const index = this.list.findIndex(i => i.id == item)
          if (index != -1) {
          this.selectItem.push(this.list[index])
          }
        })
      },
      getFocus() {
        this.visible = true
      },
      visibleChange(data) {
        this.visible = data
      },
      selectBxClick() {
        // 避免点击框体时组件消失
        this.$refs.select.visible = true
      },
      // 选择
      clickItem(item) {
        const index = this.currentval.indexOf(item.id)
        if (index == -1) {
          if (this.multiple) {
            this.currentval.push(item.id)
            this.selectItem.push(item)
          } else {
            this.currentval = [item.id]
            this.selectItem = [item]
          }
        } else {
          const itemIndex = this.selectItem.findIndex(n => n.id == item.id)
          this.selectItem.splice(itemIndex, 1)
          this.currentval.splice(index, 1)
        }
      },
      ransferDataHandle(e) {
        this.transferDialog = e.transferDialog
        this.selectItem = e.list
        this.currentval = []
        e.list.forEach(item => {
          this.currentval.push(item.id)
        })
      },
      userHandle() {
        this.transferDialog = true
        this.visible = false
      }
    }
	}
</script>

<style lang="scss" scoped>
.tableData {
  width: 100%;
  thead th {
    background-color: #000;
  }
}
</style>
